<template>
  <div class="processCenterheade row">
    <div class="processCenterHead">
      <span>{{ processCenterHeadText }}</span><span>{{ processCenterHeadSubText }}</span>
    </div>
   <com-departmentstatistical filiter-url='care/site/getdept'></com-departmentstatistical>
    <com-timestatistical></com-timestatistical>
  </div>
   <router-view></router-view>
</template>
<script>
import ComDepartmentstatistical from '../../components/departmentstatistical.vue';
import ComTimestatistical from '../../components/timestatistical.vue';
import { changeKind } from '../../vuex/action'
export default {
  data () {
    return {
      processCenterHeadText: '应用中心',
      processCenterHeadSubText:' Application Center'
    }
  },
  components: {
    ComDepartmentstatistical,
    ComTimestatistical,
  },
  vuex: {
    getters: {
      kind(state) {
        return state.kind
      }
    },
    actions: {
      changeKind: changeKind
    }
  },
  watch: {
    'kind':function(val) {
      this.changeKind(val)
      if (this.kind == "all") {
        this.$router.go({
          name: "allAppCenter"
        })
      }else{
        this.$router.go({
          name: "deptmentAppCenter",
          params: {
            kind: val
          }
        })
      }
    }
  }
}
</script>

<style scoped>
div.processCenterheader {
    float: left;
    width: 100%;
}
div.processCenterHead {
   font-size: 18px;
   padding: 16px 0;
}
div.processCenterHead span {
  color: #767E85; 
  letter-spacing: 5px;
}
div.processCenterHead span:last-child{
  font-size: 12px;
  letter-spacing: normal;
}
.middleshowcard {
  margin: 0 2%;
}
.row{
  margin-left: 0!important;
  margin-right: 0!important;
}
</style>
